import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Button, Card, Space } from 'antd';

// const { Meta } = Card;

function Order() {
    const [orders, setOrders] = useState([]); // 提供初始值为空数组
    const userId = localStorage.getItem("id"); // 获取存储在 localStorage 中的用户ID 
    // 在组件挂载时发送请求获取数据
    useEffect(() => {
        const fetchOrderData = async () => {
            try {
                // 发送请求获取数据
                const response = await axios.get(`http://192.168.61.84:8083/v1/getsublist?pn=1&userId=${userId}`, {
                    headers: { // 头部参数
                        x_token: localStorage.getItem("token")
                    }
                });

                // 确保响应数据是数组
                const data = response.data;//应该是响应数据中包含订单信息，修改为response.data.订单信息数组名
                if (Array.isArray(data.data)) {
                    setOrders(data.data);
                    console.log(data.data)
                } else {
                    console.error('Expected an array but got:', data.data);//响应数据不是数组
                }
            } catch (error) {
                console.error('Error fetching order data:', error);
            }
        };
        fetchOrderData();
    }, [userId]);

    // 返回 JSX
    return (
        <Space style={{ display: 'flex', flexWrap: 'wrap', gap: '40px' }}>
            {orders.map((order) => (
                <Card
                    key={order.id} // 确保每个 Card 组件都有一个唯一的 key
                    title={order.title} // 使用从数据获取的订单标题
                    style={{ width: 300 }}
                    actions={renderActions(order.status)}
                   
                >
                    <p>介绍：{order.describe}</p>
                    <p>地址：{order.address}</p>  
                        {/* description={order.describe} 
                        address={order.address} */}
                   
                </Card>
            ))}
        </Space>
    );
}

function renderActions(status) {
    if (status === "进行中") {
        return [
            <Button key="confirm" style={{ width: 80, left: 25 }}>确认完成</Button>,
            <Button key="info" style={{ width: 80, left: 25 }}>查看信息</Button>
        ];
    } else if (status === "待评价") {
        return [
            <Button key="evaluate" style={{ width: 80, left: 25 }}>评价</Button>,
            <Button key="again" style={{ width: 80, left: 25 }}>再来一单</Button>
        ];
    } else {
        return []; // 其他状态下不显示按钮
    }
}

export default Order;
